<template>
  <div class="result-container">
    <NavBar>
      <template #default>支付结果</template>
    </NavBar>

    <div class="result-content">
      <div v-if="loading" class="loading">
        <el-icon class="is-loading"><Loading /></el-icon>
        <span>正在查询支付结果...</span>
      </div>

      <template v-else>
        <!-- 支付成功 -->
        <div v-if="paymentSuccess" class="result-box success">
          <el-icon class="result-icon"><CircleCheck /></el-icon>
          <h2 class="result-title">支付成功</h2>
          <p class="result-desc">订单支付成功，感谢您的购买！</p>
        </div>

        <!-- 支付失败 -->
        <div v-else class="result-box error">
          <el-icon class="result-icon"><CircleClose /></el-icon>
          <h2 class="result-title">支付失败</h2>
          <p class="result-desc">订单支付失败，请重新尝试</p>
        </div>

        <!-- 订单信息 -->
        <div class="order-info">
          <div class="info-item">
            <span class="label">订单号：</span>
            <span class="value">{{ orderId }}</span>
          </div>
          <div class="info-item">
            <span class="label">支付金额：</span>
            <span class="value">￥{{ formatPrice(amount) }}</span>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button
            v-if="!paymentSuccess"
            type="primary"
            @click="retryPayment"
          >
            重新支付
          </el-button>
          <el-button @click="viewOrder">查看订单</el-button>
          <el-button @click="backToHome">返回首页</el-button>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Loading, CircleCheck, CircleClose } from '@element-plus/icons-vue';
import NavBar from '@/components/common/NavBar.vue';
import { queryPaymentStatus } from '@/api/PaymentApi';

const route = useRoute();
const router = useRouter();
const loading = ref(true);
const paymentSuccess = ref(false);

// 从URL参数中获取订单信息
const orderId = route.query.out_trade_no;
const amount = route.query.total_amount;

// 格式化金额
const formatPrice = (price) => {
  if (!price && price !== 0) return '0.00';
  return Number(price).toFixed(2);
};

// 查询支付结果
const checkPaymentResult = async () => {
  try {
    const response = await queryPaymentStatus(orderId);
    // 检查支付状态：data为1表示支付成功，0表示未支付
    paymentSuccess.value = response?.data?.code === 1 && response?.data?.data === 1;
  } catch (error) {
    console.error('查询支付结果失败:', error);
    ElMessage.error('查询支付结果失败');
    paymentSuccess.value = false;
  } finally {
    loading.value = false;
  }
};

// 重新支付
const retryPayment = () => {
  router.replace({
    path: '/payment',
    query: {
      orderId,
      amount
    }
  });
};

// 查看订单
const viewOrder = () => {
  router.push('/orders');
};

// 返回首页
const backToHome = () => {
  router.push('/home');
};

onMounted(() => {
  if (!orderId) {
    ElMessage.error('订单信息不完整');
    router.replace('/orders');
    return;
  }

  // 查询支付结果
  checkPaymentResult();
});
</script>

<style scoped>
.result-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 44px;
}

.result-content {
  padding: 20px 16px;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #666;
}

.loading .el-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.result-box {
  text-align: center;
  padding: 32px 16px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 16px;
}

.result-box.success {
  background: #f0f9eb;
}

.result-box.error {
  background: #fef0f0;
}

.result-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.success .result-icon {
  color: #67c23a;
}

.error .result-icon {
  color: #f56c6c;
}

.result-title {
  font-size: 20px;
  color: #333;
  margin: 0 0 8px;
}

.result-desc {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.order-info {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  font-size: 14px;
  margin-bottom: 8px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item .label {
  color: #666;
  width: 80px;
}

.info-item .value {
  color: #333;
  flex: 1;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-buttons .el-button {
  margin: 0;
  height: 40px;
}
</style>